<!-- 支付结果页 -->
<template>
	<view class="success-page">

		<!-- 商品结果页 -->
<view class="successzf" v-if="orderType==='goods'">
			
			<image v-if="payState === 'success'" src="https://s1.ax1x.com/2022/03/31/qWNbKf.png" mode=""></image>
			<image v-else src="https://s4.ax1x.com/2022/02/21/Hj8rge.png" mode=""></image>
			
			<view  class="succtext">
				订单{{ payText[payState] }}
			</view>
			
			
			<view class="succe988" v-if="payState === 'success' && orderDetail.total_fee">
				¥{{ orderDetail.total_fee }}
			</view>
			<view class="suceeckbh">
				仓库正在为您备货中，请耐心等待~
			</view>
			
			<!-- 返回首页和查看订单 -->
			<view class="succbutton">
				<view class="" @click="$Router.pushTab('/pages/index/index')">
					返回首页
				</view>
				<view class="" @click="$Router.replace({ path: '/pages/order/list', query: { id: orderDetail.id } })">
					查看订单
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<u-modal v-if="payState === 'success'" ref="uModal" v-model="showModal" :show-cancel-button="true"
				confirm-color="#e9b461" cancel-color="#666666" @confirm="onConfirm" confirm-text="订阅消息" cancel-text="取消"
				content="是否订阅消息,追踪订单信息?" title="提示"></u-modal>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import Pay from '@/shopro/pay';
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	let payTimer = null;
	const payCount = 5;
	export default {
		components: {},
		data() {
			return {
				showModal: false,
				messageType: '',
				templateIds: [],
				wxOpenTags: '',
				orderDetail: {}, //订单详情
				orderType: '', //订单类型
				payText: {
					fail: '支付失败',
					success: '支付成功',
					paying: '查询中...'
				},
				payImg: {
					fail: this.$IMG_URL + '/imgs/order/order_pay_fail.gif',
					success: this.$IMG_URL + '/imgs/order/order_pay_success.gif',
					paying: this.$IMG_URL + '/imgs/order/order_paying.gif'
				},
				payState: '' //支付状态
			};
		},
		computed: {
			...mapGetters(['subscribeMessageIdsMap'])
		},
		onLoad() {
			this.payState = this.$Route.query.payState ? this.$Route.query.payState : 'paying';
			this.orderType = this.$Route.query.orderType
			this.$Route.query.orderId && this.getOrderDetail();
			switch (this.payState) {
				case 'success':
					this.getCartList();
					break;
				case 'fail':
					break;
				case 'paying':
					this.checkTimer();
					break;
				default:
					break;
			}
		},
		onHide() {
			clearInterval(payTimer);
			payTimer = null;
		},
		methods: {
			...mapActions(['getCartList']),

			// 订阅消息
			onConfirm() {
				//  #ifdef MP-WEIXIN
				this.templateIds.length && this.$store.commit('subscribeMessage', this.messageType);
				//  #endif
			},

			// 获取订单详情
			getOrderDetail() {
				switch (this.$Route.query.orderType) {
					case 'goods':
						this.getGoodsOrderDetail()
						break;
					case 'recharge':
						this.getRechargeOrderDetail()
						break;
					default:
						break;
				}
			},

			// 支付订单信息
			getGoodsOrderDetail() {
				let that = this;
				that.$http('order.detail', {
					id: that.$Route.query.orderId
				}).then(async res => {
					if (res.code === 1) {
						that.orderDetail = res.data;
						if (res.data.status > 0) {
							this.messageType = this.orderDetail.activity_type == 'groupon' ? 'grouponResult' :
								'result';
							//  #ifdef MP-WEIXIN
							this.templateIds = this.subscribeMessageIdsMap[this.messageType];
							this.showModal = this.templateIds.length;
							//  #endif
						}
					}
				});
			},

			// 充值订单信息
			getRechargeOrderDetail() {
				let that = this;
				that.$http('money.rechargeDetail', {
					id: that.$Route.query.orderId
				}).then(res => {
					if (res.code === 1) {
						that.orderDetail = res.data;
						if (res.data.status > 0) {
							this.messageType = 'result';
						}
					}
				});
			},

			// 支付倒计时
			checkTimer() {
				let that = this;
				let count = 0;
				that.payState = 'paying';
				payTimer = setInterval(() => {
					count++;
					if (count < payCount) {
						that.checkPay();
					} else {
						clearInterval(payTimer);
						that.payState = 'fail';
					}
				}, 800);
			},

			// 检测支付
			async checkPay() {
				let that = this;
				let paiMap = {
					'goods': 'order.detail',
					'recharge': 'money.rechargeDetail'
				}
				let res = await that.$http(
					paiMap[that.orderType], {
						id: that.$Route.query.orderId
					},
					false
				);
				if (res.code === 1 && res.data.status > 0) {
					that.payState = 'success';
					clearInterval(payTimer);
				}
			},

			// 重新支付
			onPay() {
				let that = this;
				let pay = new Pay(that.$Route.query.type, that.orderDetail, that.orderType);
			}
		}
	};
</script>

<style lang="scss" scopeds>
	.succbutton{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 138rpx;
	}
	.succbutton>view{
		width: 210rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.succbutton>view:first-of-type{
		background: #FFCC99;		
		margin-right: 20rpx;
		opacity: 0.5;
	}
	.succbutton>view:last-of-type{
		background: #FF9A33;
	}
	.suceeckbh{
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
	}
	.succtext{
		font-size: 40rpx;
		font-weight: 500;
		color: #333333;
		margin: 51rpx 0 47rpx;
	}
	.succe988{
		font-size: 50rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 29rpx;
	}
	.successzf{
		padding: 200rpx 0 0 0;
		text-align: center;
	}
	.successzf image{
		width: 186rpx;
		height: 171rpx;
	}
</style>
